<div class="p++" flex-container="row" flex-gutter="24">
    <!-- Red Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-red-500">
            <span class="color__title">Red</span>
            <span class="color__variable">$red-500</span>
        </div>
        <div class="bgc-red-50">
            <span class="color__variable color__variable--black">$red-50</span>
        </div>
        <div class="bgc-red-100">
            <span class="color__variable color__variable--black">$red-100</span>
        </div>
        <div class="bgc-red-200">
            <span class="color__variable color__variable--black">$red-200</span>
        </div>
        <div class="bgc-red-300">
            <span class="color__variable color__variable--black">$red-300</span>
        </div>
        <div class="bgc-red-400">
            <span class="color__variable color__variable--black">$red-400</span>
        </div>
        <div class="bgc-red-500">
            <span class="color__variable">$red-500</span>
        </div>
        <div class="bgc-red-600">
            <span class="color__variable">$red-600</span>
        </div>
        <div class="bgc-red-700">
            <span class="color__variable">$red-700</span>
        </div>
        <div class="bgc-red-800">
            <span class="color__variable">$red-800</span>
        </div>
        <div class="bgc-red-900">
            <span class="color__variable">$red-900</span>
        </div>
        <div class="bgc-red-A100">
            <span class="color__variable color__variable--black">$red-A100</span>
        </div>
        <div class="bgc-red-A200">
            <span class="color__variable">$red-A200</span>
        </div>
        <div class="bgc-red-A400">
            <span class="color__variable">$red-A400</span>
        </div>
        <div class="bgc-red-A700">
            <span class="color__variable">$red-A700</span>
        </div>
    </div>
 
    <!-- Pink Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-pink-500">
            <span class="color__title">Pink</span>
            <span class="color__variable">$pink-500</span>
        </div>
        <div class="bgc-pink-50">
            <span class="color__variable color__variable--black">$pink-50</span>
        </div>
        <div class="bgc-pink-100">
            <span class="color__variable color__variable--black">$pink-100</span>
        </div>
        <div class="bgc-pink-200">
            <span class="color__variable color__variable--black">$pink-200</span>
        </div>
        <div class="bgc-pink-300">
            <span class="color__variable color__variable--black">$pink-300</span>
        </div>
        <div class="bgc-pink-400">
            <span class="color__variable color__variable--black">$pink-400</span>
        </div>
        <div class="bgc-pink-500">
            <span class="color__variable">$pink-500</span>
        </div>
        <div class="bgc-pink-600">
            <span class="color__variable">$pink-600</span>
        </div>
        <div class="bgc-pink-700">
            <span class="color__variable">$pink-700</span>
        </div>
        <div class="bgc-pink-800">
            <span class="color__variable">$pink-800</span>
        </div>
        <div class="bgc-pink-900">
            <span class="color__variable">$pink-900</span>
        </div>
        <div class="bgc-pink-A100">
            <span class="color__variable color__variable--black">$pink-A100</span>
        </div>
        <div class="bgc-pink-A200">
            <span class="color__variable">$pink-A200</span>
        </div>
        <div class="bgc-pink-A400">
            <span class="color__variable">$pink-A400</span>
        </div>
        <div class="bgc-pink-A700">
            <span class="color__variable">$pink-A700</span>
        </div>
    </div>
 
    <!-- Purple Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-purple-500">
            <span class="color__title">Purple</span>
            <span class="color__variable">$purple-500</span>
        </div>
        <div class="bgc-purple-50">
            <span class="color__variable color__variable--black">$purple-50</span>
        </div>
        <div class="bgc-purple-100">
            <span class="color__variable color__variable--black">$purple-100</span>
        </div>
        <div class="bgc-purple-200">
            <span class="color__variable color__variable--black">$purple-200</span>
        </div>
        <div class="bgc-purple-300">
            <span class="color__variable color__variable--black">$purple-300</span>
        </div>
        <div class="bgc-purple-400">
            <span class="color__variable color__variable--black">$purple-400</span>
        </div>
        <div class="bgc-purple-500">
            <span class="color__variable">$purple-500</span>
        </div>
        <div class="bgc-purple-600">
            <span class="color__variable">$purple-600</span>
        </div>
        <div class="bgc-purple-700">
            <span class="color__variable">$purple-700</span>
        </div>
        <div class="bgc-purple-800">
            <span class="color__variable">$purple-800</span>
        </div>
        <div class="bgc-purple-900">
            <span class="color__variable">$purple-900</span>
        </div>
        <div class="bgc-purple-A100">
            <span class="color__variable color__variable--black">$purple-A100</span>
        </div>
        <div class="bgc-purple-A200">
            <span class="color__variable">$purple-A200</span>
        </div>
        <div class="bgc-purple-A400">
            <span class="color__variable">$purple-A400</span>
        </div>
        <div class="bgc-purple-A700">
            <span class="color__variable">$purple-A700</span>
        </div>
    </div>
 
    <!-- Deep purple Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-deep-purple-500">
            <span class="color__title">Deep purple</span>
            <span class="color__variable">$deep-purple-500</span>
        </div>
        <div class="bgc-deep-purple-50">
            <span class="color__variable color__variable--black">$deep-purple-50</span>
        </div>
        <div class="bgc-deep-purple-100">
            <span class="color__variable color__variable--black">$deep-purple-100</span>
        </div>
        <div class="bgc-deep-purple-200">
            <span class="color__variable color__variable--black">$deep-purple-200</span>
        </div>
        <div class="bgc-deep-purple-300">
            <span class="color__variable color__variable--black">$deep-purple-300</span>
        </div>
        <div class="bgc-deep-purple-400">
            <span class="color__variable color__variable--black">$deep-purple-400</span>
        </div>
        <div class="bgc-deep-purple-500">
            <span class="color__variable">$deep-purple-500</span>
        </div>
        <div class="bgc-deep-purple-600">
            <span class="color__variable">$deep-purple-600</span>
        </div>
        <div class="bgc-deep-purple-700">
            <span class="color__variable">$deep-purple-700</span>
        </div>
        <div class="bgc-deep-purple-800">
            <span class="color__variable">$deep-purple-800</span>
        </div>
        <div class="bgc-deep-purple-900">
            <span class="color__variable">$deep-purple-900</span>
        </div>
        <div class="bgc-deep-purple-A100">
            <span class="color__variable color__variable--black">$deep-purple-A100</span>
        </div>
        <div class="bgc-deep-purple-A200">
            <span class="color__variable">$deep-purple-A200</span>
        </div>
        <div class="bgc-deep-purple-A400">
            <span class="color__variable">$deep-purple-A400</span>
        </div>
        <div class="bgc-deep-purple-A700">
            <span class="color__variable">$deep-purple-A700</span>
        </div>
    </div>
</div>
 
<div class="p++" flex-container="row" flex-gutter="24">
    <!-- Indigo Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-indigo-500">
            <span class="color__title">Indigo</span>
            <span class="color__variable">$indigo-500</span>
        </div>
        <div class="bgc-indigo-50">
            <span class="color__variable color__variable--black">$indigo-50</span>
        </div>
        <div class="bgc-indigo-100">
            <span class="color__variable color__variable--black">$indigo-100</span>
        </div>
        <div class="bgc-indigo-200">
            <span class="color__variable color__variable--black">$indigo-200</span>
        </div>
        <div class="bgc-indigo-300">
            <span class="color__variable color__variable--black">$indigo-300</span>
        </div>
        <div class="bgc-indigo-400">
            <span class="color__variable color__variable--black">$indigo-400</span>
        </div>
        <div class="bgc-indigo-500">
            <span class="color__variable">$indigo-500</span>
        </div>
        <div class="bgc-indigo-600">
            <span class="color__variable">$indigo-600</span>
        </div>
        <div class="bgc-indigo-700">
            <span class="color__variable">$indigo-700</span>
        </div>
        <div class="bgc-indigo-800">
            <span class="color__variable">$indigo-800</span>
        </div>
        <div class="bgc-indigo-900">
            <span class="color__variable">$indigo-900</span>
        </div>
        <div class="bgc-indigo-A100">
            <span class="color__variable color__variable--black">$indigo-A100</span>
        </div>
        <div class="bgc-indigo-A200">
            <span class="color__variable">$indigo-A200</span>
        </div>
        <div class="bgc-indigo-A400">
            <span class="color__variable">$indigo-A400</span>
        </div>
        <div class="bgc-indigo-A700">
            <span class="color__variable">$indigo-A700</span>
        </div>
    </div>
 
    <!-- Blue Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-blue-500">
            <span class="color__title">Blue</span>
            <span class="color__variable">$blue-500</span>
        </div>
        <div class="bgc-blue-50">
            <span class="color__variable color__variable--black">$blue-50</span>
        </div>
        <div class="bgc-blue-100">
            <span class="color__variable color__variable--black">$blue-100</span>
        </div>
        <div class="bgc-blue-200">
            <span class="color__variable color__variable--black">$blue-200</span>
        </div>
        <div class="bgc-blue-300">
            <span class="color__variable color__variable--black">$blue-300</span>
        </div>
        <div class="bgc-blue-400">
            <span class="color__variable color__variable--black">$blue-400</span>
        </div>
        <div class="bgc-blue-500">
            <span class="color__variable">$blue-500</span>
        </div>
        <div class="bgc-blue-600">
            <span class="color__variable">$blue-600</span>
        </div>
        <div class="bgc-blue-700">
            <span class="color__variable">$blue-700</span>
        </div>
        <div class="bgc-blue-800">
            <span class="color__variable">$blue-800</span>
        </div>
        <div class="bgc-blue-900">
            <span class="color__variable">$blue-900</span>
        </div>
        <div class="bgc-blue-A100">
            <span class="color__variable color__variable--black">$blue-A100</span>
        </div>
        <div class="bgc-blue-A200">
            <span class="color__variable">$blue-A200</span>
        </div>
        <div class="bgc-blue-A400">
            <span class="color__variable">$blue-A400</span>
        </div>
        <div class="bgc-blue-A700">
            <span class="color__variable">$blue-A700</span>
        </div>
    </div>
 
    <!-- Light Blue Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-light-blue-500">
            <span class="color__title">Light blue</span>
            <span class="color__variable">$light-blue-500</span>
        </div>
        <div class="bgc-light-blue-50">
            <span class="color__variable color__variable--black">$light-blue-50</span>
        </div>
        <div class="bgc-light-blue-100">
            <span class="color__variable color__variable--black">$light-blue-100</span>
        </div>
        <div class="bgc-light-blue-200">
            <span class="color__variable color__variable--black">$light-blue-200</span>
        </div>
        <div class="bgc-light-blue-300">
            <span class="color__variable color__variable--black">$light-blue-300</span>
        </div>
        <div class="bgc-light-blue-400">
            <span class="color__variable color__variable--black">$light-blue-400</span>
        </div>
        <div class="bgc-light-blue-500">
            <span class="color__variable">$light-blue-500</span>
        </div>
        <div class="bgc-light-blue-600">
            <span class="color__variable">$light-blue-600</span>
        </div>
        <div class="bgc-light-blue-700">
            <span class="color__variable">$light-blue-700</span>
        </div>
        <div class="bgc-light-blue-800">
            <span class="color__variable">$light-blue-800</span>
        </div>
        <div class="bgc-light-blue-900">
            <span class="color__variable">$light-blue-900</span>
        </div>
        <div class="bgc-light-blue-A100">
            <span class="color__variable color__variable--black">$light-blue-A100</span>
        </div>
        <div class="bgc-light-blue-A200">
            <span class="color__variable color__variable--black">$light-blue-A200</span>
        </div>
        <div class="bgc-light-blue-A400">
            <span class="color__variable color__variable--black">$light-blue-A400</span>
        </div>
        <div class="bgc-light-blue-A700">
            <span class="color__variable">$light-blue-A700</span>
        </div>
    </div>
 
    <!-- Cyan Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-cyan-500">
            <span class="color__title">Cyan</span>
            <span class="color__variable">$cyan-500</span>
        </div>
        <div class="bgc-cyan-50">
            <span class="color__variable color__variable--black">$cyan-50</span>
        </div>
        <div class="bgc-cyan-100">
            <span class="color__variable color__variable--black">$cyan-100</span>
        </div>
        <div class="bgc-cyan-200">
            <span class="color__variable color__variable--black">$cyan-200</span>
        </div>
        <div class="bgc-cyan-300">
            <span class="color__variable color__variable--black">$cyan-300</span>
        </div>
        <div class="bgc-cyan-400">
            <span class="color__variable color__variable--black">$cyan-400</span>
        </div>
        <div class="bgc-cyan-500">
            <span class="color__variable">$cyan-500</span>
        </div>
        <div class="bgc-cyan-600">
            <span class="color__variable">$cyan-600</span>
        </div>
        <div class="bgc-cyan-700">
            <span class="color__variable">$cyan-700</span>
        </div>
        <div class="bgc-cyan-800">
            <span class="color__variable">$cyan-800</span>
        </div>
        <div class="bgc-cyan-900">
            <span class="color__variable">$cyan-900</span>
        </div>
        <div class="bgc-cyan-A100">
            <span class="color__variable color__variable--black">$cyan-A100</span>
        </div>
        <div class="bgc-cyan-A200">
            <span class="color__variable color__variable--black">$cyan-A200</span>
        </div>
        <div class="bgc-cyan-A400">
            <span class="color__variable color__variable--black">$cyan-A400</span>
        </div>
        <div class="bgc-cyan-A700">
            <span class="color__variable">$cyan-A700</span>
        </div>
    </div>
 
    <!-- Teal Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-teal-500">
            <span class="color__title">Teal</span>
            <span class="color__variable">$teal-500</span>
        </div>
        <div class="bgc-teal-50">
            <span class="color__variable color__variable--black">$teal-50</span>
        </div>
        <div class="bgc-teal-100">
            <span class="color__variable color__variable--black">$teal-100</span>
        </div>
        <div class="bgc-teal-200">
            <span class="color__variable color__variable--black">$teal-200</span>
        </div>
        <div class="bgc-teal-300">
            <span class="color__variable color__variable--black">$teal-300</span>
        </div>
        <div class="bgc-teal-400">
            <span class="color__variable color__variable--black">$teal-400</span>
        </div>
        <div class="bgc-teal-500">
            <span class="color__variable">$teal-500</span>
        </div>
        <div class="bgc-teal-600">
            <span class="color__variable">$teal-600</span>
        </div>
        <div class="bgc-teal-700">
            <span class="color__variable">$teal-700</span>
        </div>
        <div class="bgc-teal-800">
            <span class="color__variable">$teal-800</span>
        </div>
        <div class="bgc-teal-900">
            <span class="color__variable">$teal-900</span>
        </div>
        <div class="bgc-teal-A100">
            <span class="color__variable color__variable--black">$teal-A100</span>
        </div>
        <div class="bgc-teal-A200">
            <span class="color__variable color__variable--black">$teal-A200</span>
        </div>
        <div class="bgc-teal-A400">
            <span class="color__variable color__variable--black">$teal-A400</span>
        </div>
        <div class="bgc-teal-A700">
            <span class="color__variable">$teal-A700</span>
        </div>
    </div>
</div>
 
<div class="p++" flex-container="row" flex-gutter="24">
    <!-- Green Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-green-500">
            <span class="color__title">Green</span>
            <span class="color__variable">$green-500</span>
        </div>
        <div class="bgc-green-50">
            <span class="color__variable color__variable--black">$green-50</span>
        </div>
        <div class="bgc-green-100">
            <span class="color__variable color__variable--black">$green-100</span>
        </div>
        <div class="bgc-green-200">
            <span class="color__variable color__variable--black">$green-200</span>
        </div>
        <div class="bgc-green-300">
            <span class="color__variable color__variable--black">$green-300</span>
        </div>
        <div class="bgc-green-400">
            <span class="color__variable color__variable--black">$green-400</span>
        </div>
        <div class="bgc-green-500">
            <span class="color__variable">$green-500</span>
        </div>
        <div class="bgc-green-600">
            <span class="color__variable">$green-600</span>
        </div>
        <div class="bgc-green-700">
            <span class="color__variable">$green-700</span>
        </div>
        <div class="bgc-green-800">
            <span class="color__variable">$green-800</span>
        </div>
        <div class="bgc-green-900">
            <span class="color__variable">$green-900</span>
        </div>
        <div class="bgc-green-A100">
            <span class="color__variable color__variable--black">$green-A100</span>
        </div>
        <div class="bgc-green-A200">
            <span class="color__variable color__variable--black">$green-A200</span>
        </div>
        <div class="bgc-green-A400">
            <span class="color__variable color__variable--black">$green-A400</span>
        </div>
        <div class="bgc-green-A700">
            <span class="color__variable">$green-A700</span>
        </div>
    </div>
 
    <!-- Light Green Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-light-green-500">
            <span class="color__title">Light Green</span>
            <span class="color__variable">$light-green-500</span>
        </div>
        <div class="bgc-light-green-50">
            <span class="color__variable color__variable--black">$light-green-50</span>
        </div>
        <div class="bgc-light-green-100">
            <span class="color__variable color__variable--black">$light-green-100</span>
        </div>
        <div class="bgc-light-green-200">
            <span class="color__variable color__variable--black">$light-green-200</span>
        </div>
        <div class="bgc-light-green-300">
            <span class="color__variable color__variable--black">$light-green-300</span>
        </div>
        <div class="bgc-light-green-400">
            <span class="color__variable color__variable--black">$light-green-400</span>
        </div>
        <div class="bgc-light-green-500">
            <span class="color__variable">$light-green-500</span>
        </div>
        <div class="bgc-light-green-600">
            <span class="color__variable">$light-green-600</span>
        </div>
        <div class="bgc-light-green-700">
            <span class="color__variable">$light-green-700</span>
        </div>
        <div class="bgc-light-green-800">
            <span class="color__variable">$light-green-800</span>
        </div>
        <div class="bgc-light-green-900">
            <span class="color__variable">$light-green-900</span>
        </div>
        <div class="bgc-light-green-A100">
            <span class="color__variable color__variable--black">$light-green-A100</span>
        </div>
        <div class="bgc-light-green-A200">
            <span class="color__variable color__variable--black">$light-green-A200</span>
        </div>
        <div class="bgc-light-green-A400">
            <span class="color__variable color__variable--black">$light-green-A400</span>
        </div>
        <div class="bgc-light-green-A700">
            <span class="color__variable color__variable--black">$light-green-A700</span>
        </div>
    </div>
 
    <!-- Lime Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-lime-500">
            <span class="color__title color__variable--black">Lime</span>
            <span class="color__variable color__variable--black">$lime-500</span>
        </div>
        <div class="bgc-lime-50">
            <span class="color__variable color__variable--black">$lime-50</span>
        </div>
        <div class="bgc-lime-100">
            <span class="color__variable color__variable--black">$lime-100</span>
        </div>
        <div class="bgc-lime-200">
            <span class="color__variable color__variable--black">$lime-200</span>
        </div>
        <div class="bgc-lime-300">
            <span class="color__variable color__variable--black">$lime-300</span>
        </div>
        <div class="bgc-lime-400">
            <span class="color__variable color__variable--black">$lime-400</span>
        </div>
        <div class="bgc-lime-500">
            <span class="color__variable color__variable--black">$lime-500</span>
        </div>
        <div class="bgc-lime-600">
            <span class="color__variable color__variable--black">$lime-600</span>
        </div>
        <div class="bgc-lime-700">
            <span class="color__variable">$lime-700</span>
        </div>
        <div class="bgc-lime-800">
            <span class="color__variable">$lime-800</span>
        </div>
        <div class="bgc-lime-900">
            <span class="color__variable">$lime-900</span>
        </div>
        <div class="bgc-lime-A100">
            <span class="color__variable color__variable--black">$lime-A100</span>
        </div>
        <div class="bgc-lime-A200">
            <span class="color__variable color__variable--black">$lime-A200</span>
        </div>
        <div class="bgc-lime-A400">
            <span class="color__variable color__variable--black">$lime-A400</span>
        </div>
        <div class="bgc-lime-A700">
            <span class="color__variable color__variable--black">$lime-A700</span>
        </div>
    </div>
 
    <!-- Yellow Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-yellow-500">
            <span class="color__title color__variable--black">Yellow</span>
            <span class="color__variable color__variable--black">$yellow-500</span>
        </div>
        <div class="bgc-yellow-50">
            <span class="color__variable color__variable--black">$yellow-50</span>
        </div>
        <div class="bgc-yellow-100">
            <span class="color__variable color__variable--black">$yellow-100</span>
        </div>
        <div class="bgc-yellow-200">
            <span class="color__variable color__variable--black">$yellow-200</span>
        </div>
        <div class="bgc-yellow-300">
            <span class="color__variable color__variable--black">$yellow-300</span>
        </div>
        <div class="bgc-yellow-400">
            <span class="color__variable color__variable--black">$yellow-400</span>
        </div>
        <div class="bgc-yellow-500">
            <span class="color__variable color__variable--black">$yellow-500</span>
        </div>
        <div class="bgc-yellow-600">
            <span class="color__variable color__variable--black">$yellow-600</span>
        </div>
        <div class="bgc-yellow-700">
            <span class="color__variable color__variable--black">$yellow-700</span>
        </div>
        <div class="bgc-yellow-800">
            <span class="color__variable">$yellow-800</span>
        </div>
        <div class="bgc-yellow-900">
            <span class="color__variable">$yellow-900</span>
        </div>
        <div class="bgc-yellow-A100">
            <span class="color__variable color__variable--black">$yellow-A100</span>
        </div>
        <div class="bgc-yellow-A200">
            <span class="color__variable color__variable--black">$yellow-A200</span>
        </div>
        <div class="bgc-yellow-A400">
            <span class="color__variable color__variable--black">$yellow-A400</span>
        </div>
        <div class="bgc-yellow-A700">
            <span class="color__variable color__variable--black">$yellow-A700</span>
        </div>
    </div>
</div>
 
<div class="p++" flex-container="row" flex-gutter="24">
    <!-- Amber Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-amber-500">
            <span class="color__title">Amber</span>
            <span class="color__variable">$amber-500</span>
        </div>
        <div class="bgc-amber-50">
            <span class="color__variable color__variable--black">$amber-50</span>
        </div>
        <div class="bgc-amber-100">
            <span class="color__variable color__variable--black">$amber-100</span>
        </div>
        <div class="bgc-amber-200">
            <span class="color__variable color__variable--black">$amber-200</span>
        </div>
        <div class="bgc-amber-300">
            <span class="color__variable color__variable--black">$amber-300</span>
        </div>
        <div class="bgc-amber-400">
            <span class="color__variable color__variable--black">$amber-400</span>
        </div>
        <div class="bgc-amber-500">
            <span class="color__variable color__variable--black">$amber-500</span>
        </div>
        <div class="bgc-amber-600">
            <span class="color__variable">$amber-600</span>
        </div>
        <div class="bgc-amber-700">
            <span class="color__variable">$amber-700</span>
        </div>
        <div class="bgc-amber-800">
            <span class="color__variable">$amber-800</span>
        </div>
        <div class="bgc-amber-900">
            <span class="color__variable">$amber-900</span>
        </div>
        <div class="bgc-amber-A100">
            <span class="color__variable color__variable--black">$amber-A100</span>
        </div>
        <div class="bgc-amber-A200">
            <span class="color__variable color__variable--black">$amber-A200</span>
        </div>
        <div class="bgc-amber-A400">
            <span class="color__variable color__variable--black">$amber-A400</span>
        </div>
        <div class="bgc-amber-A700">
            <span class="color__variable">$amber-A700</span>
        </div>
    </div>
 
    <!-- Orange  Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-orange-500">
            <span class="color__title">Orange</span>
            <span class="color__variable">$orange-500</span>
        </div>
        <div class="bgc-orange-50">
            <span class="color__variable color__variable--black">$orange-50</span>
        </div>
        <div class="bgc-orange-100">
            <span class="color__variable color__variable--black">$orange-100</span>
        </div>
        <div class="bgc-orange-200">
            <span class="color__variable color__variable--black">$orange-200</span>
        </div>
        <div class="bgc-orange-300">
            <span class="color__variable color__variable--black">$orange-300</span>
        </div>
        <div class="bgc-orange-400">
            <span class="color__variable color__variable--black">$orange-400</span>
        </div>
        <div class="bgc-orange-500">
            <span class="color__variable">$orange-500</span>
        </div>
        <div class="bgc-orange-600">
            <span class="color__variable">$orange-600</span>
        </div>
        <div class="bgc-orange-700">
            <span class="color__variable">$orange-700</span>
        </div>
        <div class="bgc-orange-800">
            <span class="color__variable">$orange-800</span>
        </div>
        <div class="bgc-orange-900">
            <span class="color__variable">$orange-900</span>
        </div>
        <div class="bgc-orange-A100">
            <span class="color__variable color__variable--black">$orange-A100</span>
        </div>
        <div class="bgc-orange-A200">
            <span class="color__variable color__variable--black">$orange-A200</span>
        </div>
        <div class="bgc-orange-A400">
            <span class="color__variable">$orange-A400</span>
        </div>
        <div class="bgc-orange-A700">
            <span class="color__variable">$orange-A700</span>
        </div>
    </div>
 
    <!-- Deep Orange Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-deep-orange-500">
            <span class="color__title">Deep Orange</span>
            <span class="color__variable">$deep-orange-500</span>
        </div>
        <div class="bgc-deep-orange-50">
            <span class="color__variable color__variable--black">$deep-orange-50</span>
        </div>
        <div class="bgc-deep-orange-100">
            <span class="color__variable color__variable--black">$deep-orange-100</span>
        </div>
        <div class="bgc-deep-orange-200">
            <span class="color__variable color__variable--black">$deep-orange-200</span>
        </div>
        <div class="bgc-deep-orange-300">
            <span class="color__variable color__variable--black">$deep-orange-300</span>
        </div>
        <div class="bgc-deep-orange-400">
            <span class="color__variable color__variable--black">$deep-orange-400</span>
        </div>
        <div class="bgc-deep-orange-500">
            <span class="color__variable">$deep-orange-500</span>
        </div>
        <div class="bgc-deep-orange-600">
            <span class="color__variable">$deep-orange-600</span>
        </div>
        <div class="bgc-deep-orange-700">
            <span class="color__variable">$deep-orange-700</span>
        </div>
        <div class="bgc-deep-orange-800">
            <span class="color__variable">$deep-orange-800</span>
        </div>
        <div class="bgc-deep-orange-900">
            <span class="color__variable">$deep-orange-900</span>
        </div>
        <div class="bgc-deep-orange-A100">
            <span class="color__variable color__variable--black">$deep-orange-A100</span>
        </div>
        <div class="bgc-deep-orange-A200">
            <span class="color__variable">$deep-orange-A200</span>
        </div>
        <div class="bgc-deep-orange-A400">
            <span class="color__variable">$deep-orange-A400</span>
        </div>
        <div class="bgc-deep-orange-A700">
            <span class="color__variable">$deep-orange-A700</span>
        </div>
    </div>
 
    <!-- Brown Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-brown-500">
            <span class="color__title">Brown</span>
            <span class="color__variable">$brown-500</span>
        </div>
        <div class="bgc-brown-50">
            <span class="color__variable color__variable--black">$brown-50</span>
        </div>
        <div class="bgc-brown-100">
            <span class="color__variable color__variable--black">$brown-100</span>
        </div>
        <div class="bgc-brown-200">
            <span class="color__variable color__variable--black">$brown-200</span>
        </div>
        <div class="bgc-brown-300">
            <span class="color__variable color__variable--black">$brown-300</span>
        </div>
        <div class="bgc-brown-400">
            <span class="color__variable color__variable--black">$brown-400</span>
        </div>
        <div class="bgc-brown-500">
            <span class="color__variable">$brown-500</span>
        </div>
        <div class="bgc-brown-600">
            <span class="color__variable">$brown-600</span>
        </div>
        <div class="bgc-brown-700">
            <span class="color__variable">$brown-700</span>
        </div>
        <div class="bgc-brown-800">
            <span class="color__variable">$brown-800</span>
        </div>
        <div class="bgc-brown-900">
            <span class="color__variable">$brown-900</span>
        </div>
    </div>
</div>
 
<div class="p++" flex-container="row" flex-gutter="24">
    <!-- Grey Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-grey-500">
            <span class="color__title">Grey</span>
            <span class="color__variable">$grey-500</span>
        </div>
        <div class="bgc-grey-50">
            <span class="color__variable color__variable--black">$grey-50</span>
        </div>
        <div class="bgc-grey-100">
            <span class="color__variable color__variable--black">$grey-100</span>
        </div>
        <div class="bgc-grey-200">
            <span class="color__variable color__variable--black">$grey-200</span>
        </div>
        <div class="bgc-grey-300">
            <span class="color__variable color__variable--black">$grey-300</span>
        </div>
        <div class="bgc-grey-400">
            <span class="color__variable color__variable--black">$grey-400</span>
        </div>
        <div class="bgc-grey-500">
            <span class="color__variable">$grey-500</span>
        </div>
        <div class="bgc-grey-600">
            <span class="color__variable">$grey-600</span>
        </div>
        <div class="bgc-grey-700">
            <span class="color__variable">$grey-700</span>
        </div>
        <div class="bgc-grey-800">
            <span class="color__variable">$grey-800</span>
        </div>
        <div class="bgc-grey-900">
            <span class="color__variable">$grey-900</span>
        </div>
    </div>
 
    <!-- Blue Grey Color -->
    <div class="color" flex-item>
        <div class="color__main bgc-blue-grey-500">
            <span class="color__title">Blue Grey</span>
            <span class="color__variable">$blue-grey-500</span>
        </div>
        <div class="bgc-blue-grey-50">
            <span class="color__variable color__variable--black">$blue-grey-50</span>
        </div>
        <div class="bgc-blue-grey-100">
            <span class="color__variable color__variable--black">$blue-grey-100</span>
        </div>
        <div class="bgc-blue-grey-200">
            <span class="color__variable color__variable--black">$blue-grey-200</span>
        </div>
        <div class="bgc-blue-grey-300">
            <span class="color__variable color__variable--black">$blue-grey-300</span>
        </div>
        <div class="bgc-blue-grey-400">
            <span class="color__variable color__variable--black">$blue-grey-400</span>
        </div>
        <div class="bgc-blue-grey-500">
            <span class="color__variable">$blue-grey-500</span>
        </div>
        <div class="bgc-blue-grey-600">
            <span class="color__variable">$blue-grey-600</span>
        </div>
        <div class="bgc-blue-grey-700">
            <span class="color__variable">$blue-grey-700</span>
        </div>
        <div class="bgc-blue-grey-800">
            <span class="color__variable">$blue-grey-800</span>
        </div>
        <div class="bgc-blue-grey-900">
            <span class="color__variable">$blue-grey-900</span>
        </div>
    </div>
 
    <div class="color" flex-item>
        <div class="color__main bgc-black">
            <span class="color__title">Black</span>
            <span class="color__variable">$black</span>
        </div>
        <div class="bgc-black-1">
            <span class="color__variable">$black-1, alpha : 87%</span>
        </div>
        <div class="bgc-black-2">
            <span class="color__variable">$black-2, alpha : 54%</span>
        </div>
        <div class="bgc-black-3">
            <span class="color__variable color__variable--black">$black-3, alpha : 38%</span>
        </div>
        <div class="bgc-black-4">
            <span class="color__variable color__variable--black">$black-4, alpha : 12%</span>
        </div>
    </div>
 
    <div class="color" flex-item>
        <div class="color__main bgc-white">
            <span class="color__title color__variable--black">White</span>
            <span class="color__variable color__variable--black">$white</span>
        </div>
        <div class="bgc-white-1">
            <span class="color__variable color__variable--black">$white-1, alpha : 100%</span>
        </div>
        <div class="bgc-white-2">
            <span class="color__variable color__variable--black">$white-2, alpha : 70%</span>
        </div>
        <div class="bgc-white-3">
            <span class="color__variable color__variable--black">$white-3, alpha : 30%</span>
        </div>
        <div class="bgc-white-4">
            <span class="color__variable color__variable--black">$white-4, alpha : 12%</span>
        </div>
    </div>
</div>